<template>
  <div>
    <el-drawer :with-header="false" :visible.sync="drawer" direction="rtl" :before-close="close" size="75%"
      :append-to-body="true" destroy-on-close :modal-append-to-body="false">
      <div type="primary" class="drawer-close-btn" @click="close"><img class="drawer-back" src="@/assets/images/drawer-back.png" alt=""><span class="close-text">返回线索列表</span>
      </div>
      <div class="drawer-con-wrap">
        <div class="drawer-header">
          <!-- 头 -->
          <div class="custom-header">
            <!-- 左侧信息 -->
            <div class="header-left">
              <div class="star-list" style="margin-right: 10px;">
                <!-- <i class="el-icon-star-off focus-icon" @click="attentClick()" v-if="!sfAttent" content="添加关注"></i>
                <i class="rp rp-focus-on focus-icon active" v-else @click="attentClick()" content="取消关注"></i> -->
                <!-- <i v-if="detailData.status == 2" class="rp rp-circle-password" /> -->
                <el-tooltip v-if="true" :content="!sfAttent ? '添加关注' : '取消关注'" effect="dark" placement="top">
                  <i v-if="!sfAttent" class="el-icon-star-off focus-icon" @click="attentClick()" />
                  <i v-else class="rp rp-focus-on focus-icon active" @click="attentClick()" />
                </el-tooltip>
              </div>

              <div class="item" effect="dark" placement="top">
                <span class="customer-name">{{ cluesDetails.leadsName }}</span>
              </div>
              <!-- 左右箭头 -->
              <!-- <div class="arrow-Left arrowBox"><i class="el-icon-arrow-left"></i></div>
              <div class="arrow-Right arrowBox" style="margin-left: 12px;"><i class="el-icon-arrow-right"></i></div> -->
            </div>
            <!-- 右侧按钮 -->
            <div class="header-right">
              <el-button type="primary" style="width: 54px;height: 32px;background: #204EC4;border-radius: 4px;"
                @click="btnEditInfo"><span class="right-box-text">编辑</span></el-button>
              <el-button class="header-right-box" style="width: 82px;height: 32px;"><span
                  class="right-box-text">呼叫中心</span></el-button>
              <el-button class="header-right-box" style="width: 110px;height: 32px;"><span
                  class="right-box-text">更改成交状态</span></el-button>
              <!-- 三点 -->
              <el-dropdown @command="downClick" style="margin-left: 10px;height: 32px;">
                <!-- <el-button><i class="el-icon-more" style="color: #164ACD !important;"></i></el-button> -->
                <img src="@/assets/images/drawer-more.png" style="height: 32px;width: 32px;">
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">转化为客户</el-dropdown-item>
                  <el-dropdown-item command="2">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <!-- 灰色框内容 -->
          <div class="custom-base mt8">
            <div class="custom-base-item">
              <div class="item-label">线索来源</div>
              <div class="item-value mt8">{{ cluesDetails.source }}</div>
            </div>
            <div class="custom-base-item">
              <div class="item-label">手机</div>
              <div class="item-value mt8">{{ cluesDetails.mobile }}</div>
            </div>
            <div class="custom-base-item">
              <div class="item-label">负责人</div>
              <div class="item-value mt8">{{ cluesDetails.ownerUserName }}</div>
            </div>
            <div class="custom-base-item">
              <div class="item-label">创建时间</div>
              <div class="item-value mt8">{{ cluesDetails.createTime }}</div>
            </div>
          </div>
          <!--  -->
          <div class="info-block-wrap">
            <div class="info-left-wrap">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="活动" name="activity">
                  <activityBlock />
                </el-tab-pane>
                <el-tab-pane label="详细资料" name="particular">
                  <!-- <BasicInformation></BasicInformation> -->
                  <!-- <EditBaseInfo></EditBaseInfo> -->
                  <EditBaseInfo :id="cluesDetails.id" ref="EditBaseInfo" crmType='clues' :detail="cluesDetails">
                  </EditBaseInfo>
                </el-tab-pane>
                <el-tab-pane label="工商信息" name="crm">客户关系</el-tab-pane>
                <el-tab-pane label="附件" name="accessory">
                  <accessoryBlock />
                </el-tab-pane>
                <el-tab-pane label="操作记录" name="address">
                  <RelativeHandle />
                </el-tab-pane>
                <!-- <el-tab-pane label="发票" name="invice">
                  <invoice></invoice>
                </el-tab-pane> -->
              </el-tabs>
            </div>
            <!-- 客户摘要 -->
            <!-- <customSummary ref="customSummary" /> -->
          </div>
        </div>
      </div>
    </el-drawer>

    <addDialog ref="addDialog" :dialogTitle="dialogTitle" :addType="addType" :dialogType="dialogType"
      @refreshList="refreshList" :action="createAction" @saveSubmit="saveSubmit"></addDialog>
  </div>
</template>
<script>
import data from './data.js';
import activityBlock from '@/components/busComponents/activityBlock'
import accessoryBlock from '@/components/busComponents/accessoryBlock'
import contactsBlock from '@/components/busComponents/contactsBlock'
import customAddress from '@/components/busComponents/customAddress/index.vue'
import invoice from '@/components/busComponents/invoice/index.vue'
import customSummary from '@/components/busComponents/customSummary/index.vue'
import RelativeHandle from '@/components/busComponents/RelativeHandle'
import EditBaseInfo from '@/components/BasicInformation/EditBaseInfo.vue' // 相关操作
import addDialog from '@/components/DialogCustom/addDialog.vue' // 编辑弹窗
// api 根据ID查询
import { queryByIdClues, starClue } from "@/api/clue/clue";

export default {
  name: 'clueInfoDrawer',
  components: { activityBlock, contactsBlock, customAddress, invoice, customSummary, accessoryBlock, RelativeHandle, EditBaseInfo, addDialog },
  data() {
    return {
      drawer: false,
      customInfo:'',
      customSbstractFlg: true,
      activeName: 'activity',
      sfAttent: false,
      cluesDetails: {},
      cluesDetailsCopy: {},
      // 编辑
      dialogTitle: '',
      addType: this.$GlobalStatus.tableType.Clue,
      dialogType: 1,
      createAction: {
        type: 'save',
        id: '',
        data: {}
      },
    }
  },
  methods: {
    getInfo() {
      queryByIdClues(this.cluesDetails.id).then(res => {
        this.cluesDetailsCopy = res.data;
      }).catch(error => {

      });
    },
    show(val) {
      this.cluesDetails = val
      if (val.star == 1) {
        this.sfAttent = true
      } else {
        this.sfAttent = false
      }
      this.drawer = true;
      this.getInfo()
    },
    close() {
      this.drawer = false;
    },
    handleClick() {

    },
    attentClick() {
      this.starClue()
      this.sfAttent = !this.sfAttent;
      this.$message({
        message: this.sfAttent ? '关注成功' : '取消关注成功',
        type: 'success'
      });
    },
    // 接口 编辑
    btnEditInfo() {
      // console.log('987654321',this.detailData.version)
      this.addType = this.$GlobalStatus.tableType.Clue;
      this.createAction.type = 'update';
      this.createAction.id = this.cluesDetailsCopy.id;
      this.dialogTitle = "编辑线索"
      this.$refs.addDialog.showFun(this.cluesDetailsCopy.id, this.cluesDetailsCopy.version, this.cluesDetailsCopy.batchId);
    },
    saveSubmit(params) {
      console.log(params)
      this.$emit("saveSubmit", params);
    },
    refreshList() {
      this.$emit("refreshList");
    },
    closeAddFun() {
      this.getInfo();
      this.$refs.addDialog.closeFun();
    },
    // 关注线索
    starClue(cluesDetails) {
      starClue(this.cluesDetails.id).then(res => {
      }).catch(error => {
      });
    },
    // 三点
    downClick(command) {
      console.log('++++++++++++++++++')
      this.$emit("drawerInfo", command, this.cluesDetails.id);
    },
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/drawer-back.scss";
::v-deep .el-drawer__body {
  background: #F5F6FA;
  box-shadow: -6px 0px 17px 0px rgba(38, 44, 71, 0.15);
  border-radius: 4px 0px 0px 4px;
}

::v-deep .el-tabs__item {
  color: #5A607F;
}

::v-deep .el-icon-arrow-left:before {
  width: 24px;
  height: 24px;
}

.header-right-box {
  height: 40px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #D7DBEC;

  .right-box-text {
    color: #164ACD;
  }
}

.arrowBox {
  margin-left: 18px;
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #D7DBEC;
  font-size: 24px;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}

.drawer-con-wrap {
  .mt8 {
    margin-top: 18px;
  }

  padding: 32px 32px 16px;

  .drawer-header {
    .header-name {
      font-size: 14px;
      color: #6b778c;
    }

    .custom-header {
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;

        .customer-name {
          font-size: 22px;
          font-weight: 700;
          color: #172b4d;
        }

        .star-list {
          margin-left: 10px;

          // .el-icon-star-off {
          //   font-size: 18px;
          //   font-weight: 700;
          //   color: #dfe1e6;
          //   cursor: pointer;
          // }

          .el-icon-star-on {
            color: #fac23d;
            margin-left: -3px;
            font-size: 22px;
            font-weight: 700;
            cursor: pointer;
          }
        }
      }
    }

    .link {
      .edit-link {
        font-size: 16px;
        margin-left: 8px;
      }
    }

    .custom-base {
      padding: 16px 0;
      background: #FFFFFF;
      box-shadow: 0px 1px 3px 0px rgba(21, 34, 50, 0.08);
      border-radius: 3px;
      display: flex;
      align-items: stretch;
      flex-direction: row;

      .custom-base-item {
        // flex: 0 0 20%;
        // text-align: center;
        min-width: 20%;
        padding: 0 25px;
        // border-right: 1px solid #D7DBEC;

        .item-label {
          color: #939FB6;
          font-size: 12px;
        }

        .item-value {
          color: #131523;
          font-size: 16px;
          font-weight: 500;
        }

        // .phone {
        //   color: #36b37e;
        // }
      }
    }

    .info-block-wrap {
      display: flex;
      margin-top: 16px;
      align-items: stretch;
      flex-direction: row;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(21, 34, 50, 0.08);
      border-radius: 4px;

      .info-left-wrap {
        flex: 1;
        padding: 10px 25px 25px 25px;
        overflow: hidden;
        width: 100%;
      }
    }
  }
}
</style>